<template>
	<view class="loginBox ff-color-000">
		<u-navbar title="华安智慧物联设备平台" bgColor="transparent"><template #left></template></u-navbar>
		<view class="ff-font-23 ff-font-weight-600 titleInfo" :style="tabberStyle">
			<view>欢迎来到</view>
			<view class="ff-margin-top-15">华安应急智慧物联设备平台</view>
		</view>
		<view class="ff-align-items-one ff-margin-bottom-20 ff-bg-fff ff-border-radius-20">
			<view class="icon">
				<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/login-username.png" mode="">
				</image>
			</view>
			<u--input type="number" maxlength="20" placeholder="请输入账号" border="true" v-model="params.username"></u--input>
		</view>
		<view class="ff-align-items-one ff-margin-bottom-18 ff-bg-fff ff-border-radius-20">
			<view class="icon icon1">
				<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/login-password.png" mode="">
				</image>
			</view>
			<u--input type="text" :password="params.showPassword" maxlength="50" placeholder="请输入密码" border="true"
				v-model="params.password"></u--input>
			<view class="eyeBox"><u-icon color="#999" :name="params.showPassword ? 'eye-fill' : 'eye-off'"
					@click="showPwd"></u-icon></view>
		</view>
		<view class="submit ff-bg-fff ff-text-center ff-border-radius-25 ff-padding-17 ff-color-fff ff-font-17"
			@click="loginSubmit">登录</view>
		<view class="checkTips ff-text-center">
			<u-checkbox-group v-model="params.wechatchecked">
				<u-checkbox shape="circle" name="1"></u-checkbox>
				<text class="ff-font-13">我已阅并同意</text>
				<text class="textColor ff-font-13" @click="userAgreementClick">《用户协议》</text>
				<text class="textColor ff-font-13" @click="userAgreementClick">《隐私政策》</text>
			</u-checkbox-group>
		</view>
		<f-loading ref="loading" />
		<f-uToast ref="uToast" />
	</view>
</template>

<script setup>
	import { getCurrentInstance, reactive, onMounted, onBeforeUnmount, ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { useStore } from 'vuex';
	const { state, commit, dispatch } = useStore();
	const { proxy } = getCurrentInstance();
	let params = reactive({
		border:true,
		username: '', // 用户名
		password: '', // 密码
		wechatchecked: ['1'], // 用户协议默认选中
		showPassword: true // 小眼睛
	});

	// 计算导航栏的高度
	let tabberStyle = computed(() => {
		return `margin-top:${proxy.customBar}px;`;
	});
	// 跳转用户协议页面
	let userAgreementClick = () => {
		proxy.$pageJump.navigateTo('/pages/views/loginRegister/agreement/Agreement');
	};

	// 判断登录状态
	// 获取缓存中是否是登陆状态
	if (uni.getStorageSync('isUserTrue')) {
		proxy.$pageJump.reLaunch('/pages/views/install/index');
	}

	// 密码的小眼睛效果
	let showPwd = () => {
		params.showPassword = !params.showPassword;
	};

	// 登录系列操作
	let uToast = ref(null);
	let loading = ref(null);
	let loginSubmit = async () => {
		if (!params.username) {
			uToast.value.openuToastError('账号不能为空');
			return;
		}
		if (!params.password) {
			uToast.value.openuToastError('密码不能为空');
			return;
		}
		loading.value.openLoading('登录中···');
		let dat = {
			tenantId: '000000',
			username: params.username,
			password: proxy.$md5(params.password)
		};
		let header = { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' };
		const data = await proxy.$http.post({ url: '/blade-auth/oauth/token_install', data: dat, header: header });
		// console.log('获取登录返回的数据--------', data);
		loading.value.closeLoading(); // 关闭loading
		if (data.access_token) {
			uni.setStorageSync('tenantId', data.tenant_id);
			commit('infoList/setUserInfo', data); // 给导航栏下标赋值
			uni.setStorageSync('isUserTrue', true); // 登录状态
			uni.setStorageSync('token', data.access_token); // 登录后的token
			uToast.value.openuToastSuccess('登录成功'); // 打开loading
			setTimeout(() => {
				proxy.$pageJump.reLaunch('/pages/views/install/index');
			}, 200);
		} else if (data.error_code == 400) {
			uToast.value.openuToastError(data.error_description); // 打开loading
		} else {
			uToast.value.openuToastError(data.msg); // 打开loading
		}
	};
</script>

<style scoped lang="scss">
	.loginBox {
		background: url('https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/loginBg.png') no-repeat;
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100%;
		z-index: -1;
		padding: 39rpx;

		.titleInfo {
			padding: 20% 0 23%;
			color: #0b256e;

			.logo {
				width: 160rpx;
				height: 160rpx;
			}
		}

		.ff-align-items-one {
			width: 100%;
			padding: 15rpx 28rpx;

			.icon {
				image {
					width: 25rpx;
					height: 32rpx;
					margin: 6rpx 23rpx 0 0;
				}
			}

			.icon1 {
				image {
					width: 27rpx;
				}
			}
		}

		.submit {
			margin-top: 140rpx;
			background-image: linear-gradient(to left, #2954fd, #94c3f9);
		}

		.wechat {
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.textColor {
			color: #3178ff;
		}

		.u-checkbox__icon-wrap--circle :deep(text) {
			font-size: 26rpx !important;
		}

		:deep(.u-checkbox-group--row) {
			align-items: center;
		}

		.checkTips {
			position: fixed;
			bottom: 5%;
			left: 12%;
			width: 100%;
		}

		.ff-color-0E5AD3 {
			color: #0e5ad3;
		}
	}
</style>